<template>
  <div>
    <bugcarsx :sx_show="sxshow" :sx_close="sxclose"></bugcarsx>
    <pinpmodel :switchs="pinpai_show" :close_btn="close"></pinpmodel>
    <ul class="BuyCar_tab">
      <li>
        <a @click.stop="goPx">
          排序
          <span class="iconfont icon-unfold"></span>
        </a>
      </li>
      <li>
        <a @click.stop="goPinPai">
          品牌
          <span class="iconfont icon-unfold"></span>
        </a>
      </li>
      <li>
        <a @click.stop="goJg">
          价格
          <span class="iconfont icon-unfold"></span>
        </a>
      </li>
      <li>
        <a @click.stop="goSaiXuan">
          筛选
          <span class="iconfont icon-unfold"></span>
        </a>
      </li>
    </ul>
    <pxmodel :show="show" :gotopx="onc"></pxmodel>
    <jgmodel :jgshow="jg_show" :xzjg="xz_ja"></jgmodel>

  </div>
</template>
<style>
</style>
<script>
  import pxmodel from '../assembly/paixu_model.vue'
  import jgmodel from '../assembly/jg_model.vue'
  import pinpmodel from '../assembly/pinpai_model.vue'
  import bugcarsx from '../assembly/BugCar_sx.vue'
  export default{
    data(){
      return {
        msg: 'hello vue',
        show: false,
        jg_show: false,
        pinpai_show: false,
        sxshow: false
      }
    },
    components: {
      pxmodel,
      jgmodel,
      pinpmodel,
      bugcarsx
    },
    created: function () {

    },
    methods: {
      sxclose: function (e) {
        this.sxshow = false
        bh1(e)
      },
      goSaiXuan: function () {
        this.show = false
        this.jg_show = false
        this.sxshow = true
      },
      close: function (e) {
        this.pinpai_show = false
        bh1(e)
      },
      goPinPai: function () {
        this.show = false
        this.jg_show = false
        this.pinpai_show = true
      },
      goPx: function (e) {


        this.jg_show = false
        if (this.show == true) {
          this.show = false
          bh1(e)

        } else if (this.show == false) {
          this.show = true
          bh2(e)

        }
      },
      onc: function (e) {
        let dom = $(e.currentTarget)
        let ok = $(' <span class="ok iconfont icon-check"></span>')
        $('.px_list a').removeClass('fous')
        $('.ok').remove()
        dom.append(ok)
        dom.addClass('fous')
        this.show = false
        $('body').css({"overflow-y": "auto"})
        console.log(dom.attr('val'))
      },
      goJg: function (e) {
        this.show = false
        if (this.jg_show == false) {
          this.jg_show = true
          bh2(e)
        } else if (this.jg_show == true) {
          this.jg_show = false
          bh1(e)
        }
      },
      xz_ja: function (e) {
        let dom = $(e.currentTarget)
        let ok = $(' <span class="oks iconfont icon-check" style="font-size: 12px"></span>')
        $('.jg_list a').removeClass('jgfous')
        $('.oks').remove()
        dom.append(ok)
        dom.addClass('jgfous')
        this.jg_show = false
      }
    }
  }
  function bh2(e) {
    let dom = $(e.currentTarget)
    $('.BuyCar_tab').find('a').removeClass('fous')
    $('.BuyCar_tab').find('span').removeClass('icon-fold')
    $('.BuyCar_tab').find('span').addClass('icon-unfold')
    dom.addClass('fous')
    dom.find('span').removeClass('icon-unfold')
    dom.find('span').addClass('icon-fold')
    $('body').css({"overflow-y": "hidden"})
  }
  function bh1(e) {
    let dom = $(e.currentTarget)
    $('.BuyCar_tab').find('a').removeClass('fous')
    $('.BuyCar_tab').find('span').removeClass('icon-fold')
    $('.BuyCar_tab').find('span').addClass('icon-unfold')
    $('body').css({"overflow-y": "auto"})
  }
</script>
